<template>
  <div>
    <button class="btn btn-sm btn-primary" @click="addItem">添加打新客户</button>
    <vue-config v-ref:config></vue-config>
  </div>
  <br>
  <div class="form-inline">
    <div class="form-group form-group-sm">
      申购股票代码：<input type="text" class="form-control" v-model="filter.stockCode">
    </div>
    <div class="form-group form-group-sm">
      客户姓名：<input type="text" class="form-control" v-model="filter.username">
    </div>
    <div class="form-group form-group-sm">
      资金账号：<input type="text" class="form-control" v-model="filter.userNo">
    </div>
    <div class="form-group form-group-sm">
      状态：<select class="form-control" v-model="filter.status">
        <option value="">全部</option>
        <option value="0">已删除</option>
        <option value="1">申请中</option>
        <option value="2">已驳回申请</option>
        <option value="3">认购中</option>
        <option value="4">认购成功</option>
        <option value="5">认购失败</option>
      </select>
    </div>
    <button class="btn btn-sm btn-primary" @click="search">搜索</button>
  </div>
  <table v-show="list && list.length > 0" class="table table-bordered">
    <caption>打新客户管理</caption>
    <thead>
      <tr>
        <th>资金账号</th>
        <th>客户姓名</th>
        <th>金贝塔账号id</th>
        <th>手机号</th>
        <th colspan="4">申购信息</th>
       <th class="text-right"></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="it in list">
        <tr>
          <td :rowspan="+it.status ===2 ? 5 : 4">{{it.userNo}}</td>
          <td :rowspan="+it.status ===2 ? 5 : 4">{{it.userName}}</td>
          <td :rowspan="+it.status ===2 ? 5 : 4">{{it.uid}}</td>
          <td :rowspan="+it.status ===2 ? 5 : 4">{{it.phone}}</td>
          <td class="text-right">申购股票代码</td>
          <td>{{it.stockCode}}</td>
          <td class="text-right">申购股数</td>
          <td>{{it.num}}</td>
          <td :rowspan="+it.status ===2 ? 5 : 4" class="text-right">
            <button class="btn btn-sm btn-primary" @click="modify(it)">修改</button>
          </td>
        </tr>
        <tr>
          <td class="text-right">认购金额</td>
          <td>{{it.price}}</td>
          <td class="text-right">手续费</td>
          <td>{{it.serviceCharge}}</td>
        </tr>
        <tr>
          <!-- <td class="text-right">操作类型</td>
          <td>{{ +it.type === 1 ? '认购' : '撤销'}}</td> -->
          <td class="text-right"><strong>当前状态</strong></td>
          <td colspan="3">
            <strong v-if=" +it.status === 0 ">已删除</strong>
            <strong v-if=" +it.status === 1 ">申请中</strong>
            <strong v-if=" +it.status === 2 ">已驳回申请</strong>
            <strong v-if=" +it.status === 3 ">认购中</strong>
            <strong v-if=" +it.status === 4 ">认购成功</strong>
            <strong v-if=" +it.status === 5 ">认购失败</strong>
          </td>
        </tr>
        <tr v-show = "+it.status===2">
          <td class="text-right">驳回原因</td>
          <td colspan="3">{{it.remark}}</td>
        </tr>
        <tr>
          <td class="text-right">总费用</td>
          <td>{{it.totalSpend}}</td>
          <td class="text-right">中签数</td>
          <td>{{it.finalNum}}</td>
        </tr>
      </template>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./customer-list.css" scoped></style>
<script src="./customer-list.js"></script>